<template>
  <view class="main">
    <view class="tgCard">
      <view class="header">
        <image class="headImg" :src="userInfo?.avatar" mode="scaleToFill" />
        <view>{{ userInfo?.nickName }}</view>
      </view>
      <view class="ctn">
        <view class="num"> <text>￥</text> {{ userInfo?.point }}</view>
        <view class="label">可提现余额（元）</view>
      </view>
    </view>
  </view>
  <view class="commonBox">
    <template v-if="teamList?.length > 0">
      <view class="detail_box">
        <u-cell-group :border="false">
          <u-cell
            v-for="item in teamList"
            size="large"
            :title="item.title"
            :value="item.amount"
            titleStyle="color: #1E1E1E;font-size: 28rpx;line-height: 40rpx;"
            :label="item.description"
            :border="false"
          >
          </u-cell>
        </u-cell-group>
        <u-loadmore height="30" :status="status" />
      </view>
    </template>
    <view v-else style="width: 100%; display: flex; justify-content: center">
      <u-empty mode="list"></u-empty>
    </view>
  </view>
  <view class="buttomBox">
    <u-button color="#1676fc" shape="circle" @click="goWal">立即提现</u-button>
  </view>
</template>

<script setup lang="ts">
import dayjs from "dayjs";

import { onBeforeMount, onMounted, ref } from "vue";
import { goPage } from "@/utils/commonFn";
//@ts-ignore
import { onReachBottom, onShow } from "@dcloudio/uni-app";
import { getUserInfo, profitRecordList, userCenter } from "@/api/my";
const formData = ref({
  pageNum: 1,
  pageSize: 10,
});
const userInfo = ref<myTypes.userInfo>();
onShow(async () => {
  const res = await getUserInfo();
  uni.setStorageSync("userInfo", res.data);
  teamList.value = [];
  userInfo.value = res.data;
  const res3 = await userCenter();
  if (userInfo.value) {
    userInfo.value.point = res3.data.balance;
  }
  getList();
  pointTotal.value = uni.getStorageSync("userInfo").point;
});
const pointTotal = ref(0);
const status = ref("loadmore");
const teamList = ref<myTypes.profitRecord[]>([]);
const getList = async () => {
  status.value = "loadmore";
  const res: any = await profitRecordList(formData.value);
  teamList.value = teamList.value.concat(res.rows);
  if (teamList.value.length >= (res.total as number)) {
    status.value = "nomore";
  } else {
    status.value = "loadmore";
  }
};
const goWal = () => {
  if (userInfo.value?.payPasswordFlag === "0") {
    uni.showModal({
      title: "提示",
      content: "未设置支付密码，是否前往",
      success: function (res) {
        if (res.confirm) {
          // 执行确认后的操作
          uni.navigateTo({
            url: "/pages/myPage/setting/editPage?pageType=2",
          });
        }
      },
    });
    return;
  }
  goPage(`/pages/myPage/withdrawal?banlanceAmont=${userInfo.value?.point}`);
};
onReachBottom(() => {
  formData.value.pageNum++;
  getList();
});
</script>

<style lang="less" scoped>
.tgCard {
  background: url("../../static/my/tgbg.png") no-repeat;
  background-size: 100%;
  border-radius: 32rpx;
  padding: 40rpx 48rpx;
  .header {
    display: flex;
    align-items: center;
    font-size: 32rpx;
    font-weight: 500;
    color: #ffffff;
    line-height: 44rpx;
    .headImg {
      width: 64rpx;
      height: 64rpx;
      margin-right: 18rpx;
    }
  }
  .ctn {
    margin-top: 52rpx;
    padding: 20rpx 10rpx;
    .num {
      font-size: 56rpx;
      font-family: DINPro, DINPro;
      font-weight: bold;
      color: #ffffff;
      line-height: 72rpx;
      margin-bottom: 14rpx;
      text {
        font-size: 32rpx;
        margin-right: -18rpx;
      }
    }
    .label {
      font-size: 26rpx;
      color: #ffffff;
      line-height: 36rpx;
    }
  }
}
/deep/ .u-cell__body {
  padding: 0rpx !important;
  padding-bottom: 32rpx !important;
}
.detail_box {
  background: #fff;
  border-radius: 16rpx;

  /deep/ .u-cell__label {
    font-size: 26rpx;
    font-family: DINPro-Regular, DINPro;
    color: #bebebe;
  }
  /deep/ .u-cell__value {
    font-size: 30rpx;
    font-family: DINPro-Medium, DINPro;
    font-weight: 500;
    color: #333333;
  }
}
.buttomBox {
  display: flex;
  gap: 10px;
}
</style>
